<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webgl绘制三角形</title>
</head>
<body>

    <canvas width="512" height="512"></canvas>

    <script>
        /**
         * webgl五步
         * 1.创建webgl上下文
         * 2.创建webgl程序
         * 3.将数据存入缓存区
         * 4.将数据读取到gpu
         * 5.gpu运行webgl程序
         * 
        */
        const canvas = document.querySelector("canvas");
        // 1.
        const gl = canvas.getContext("webgl");

        // 2.
        const vertex = `
            attribute vec2 position;

            void main(){
                // 设置图元为点图元时的点图元大小
                gl_PointSize = 1.0;
                gl_Position = vec4(position, 1.0, 1.0);
            }
        `;
        const fragment = `
            precision mediump float;
            void main(){
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
            }
        `;

        // 2.1将顶点着色器和片元着色器分别创建成为shader对象
        const vertexShader = gl.createShader(gl.VERTEX_SHADER);
        // shader对象绑定顶点着色器代码
        gl.shaderSource(vertexShader,vertex);
        // 编译成shader对象的代码
        gl.compileShader(vertexShader);

        const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fragmentShader,fragment);
        gl.compileShader(fragmentShader);

        // 2.2创建webgl程序，然后将两个shader对象关联到webgl程序
        const program = gl.createProgram();
        gl.attachShader(program,vertexShader);
        gl.attachShader(program,fragmentShader);
        // 将webgl程序连接到webgl上下文对象上
        gl.linkProgram(program);
        // 通过useProgram选择启用这个webgl程序，这样当我们绘制图形时，gpu就会执行相应的着色器代码
        gl.useProgram(program);

        // 3.
        // 3.1webgl默认使用类型数组存储数据，默认格式是Float32Array
        const points = new Float32Array([
            -1,-1,
            0,1,
            1,-1
        ]);
        // 3.2将定义好的数据写入webgl的缓冲区，这个过程可以总结为三步
        // (1)创建缓存对象
        const bufferId = gl.createBuffer();
        // (2)将创建的缓存对象绑定为当前操作对象
        gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
        // (3)把当前数据写入缓存对象
        gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);

        // 4.
        // 4.1将buffer的数据绑定给顶点着色器中的position变量
        // 获取顶点着色器中的position变量
        const vPosition = gl.getAttribLocation(program,'position');
        // 给变量设置长度和类型
        gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
        // 激活变量
        gl.enableVertexAttribArray(vPosition);

        // 5.
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.TRIANGLES, 0, points.length / 2);


    </script>
</body>
</html>